<template>
  <div class="container">
    <div class="header">各工序节拍</div>
    <div class="echart-container">
      <div class="table-box">
        <div class="t-body" ref="tBody">
          <div class="t-row">
            <div
              v-for="(col, idx) in tableData.title"
              :key="idx"
              class="t-column"
              v-html="col"
              style="line-height: 1.4; padding: 3px"
            ></div>
          </div>
          <div v-for="(row, index) in tableData.dataList" :key="index" class="t-row">
            <div v-for="(col, idx) in row" :key="idx" class="t-column">{{ col }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import commomOption from './commomOption.js';
  import * as echarts from 'echarts';
  export default {
    props: {
      data: {
        default: () => {
          return {
            title: [],
            dataList: [],
          };
        },
        typeof: Object,
      },
    },
    data() {
      return {
        myChart: null,
        tableData: {
          title: ['', '群底<br>胶带', '引线<br>切断', '封口板<br>放置', '引线<br>焊接', '强度<br>检测', '引线<br>折曲'],
          dataList: [
            ['群底胶带', 1, '', 1, 2, '', ''],
            ['引线切断', 1, '', 1, '', '', ''],
            ['封口板放置', 1, '', '', 2, '', '2'],
            ['引线焊接', 1, '', 1, 2, '', ''],
            ['强度检测', 1, '', 1, 2, '', ''],
            ['引线折曲', 1, '', 1, 2, '', ''],
          ],
        },
      };
    },
    watch: {
      data: {
        handler() {
          this.tableData.title = this.data.title;
          this.tableData.dataList = this.data.dataList;
        },
        immediate: true,
      },
    },
    created() {},
    methods: {},
  };
</script>
<style lang="scss" scoped>
  @import url(./container.scss);
  .container {
    position: relative;
    flex: 1;
    //background: url(../image/block_bg_1.png) 0px 0px no-repeat;
    background-size: 100% 100%;
    width: 100%;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;
    &:nth-last-child(1) {
      padding-bottom: 0px;
    }
    .header {
      font-size: 20px;
      font-family: 'Microsoft YaHei';
      color: rgb(255, 255, 255);
      font-weight: bold;
      text-shadow: 0px 0px 10px rgba(5, 28, 67, 0.004);
      margin-top: 20px;
      padding-bottom: 5px;
      padding-left: 15%;
      background: url(../image/block_title.png) 0px 0px no-repeat;
      background-size: 100% 100%;
    }
    .table-box {
      flex: 1;
      display: flex;
      min-height: 400px;
      flex-direction: column;

      .t-header {
        background: url(../image/table-header.png) 0px 0px no-repeat;
        background-size: 100% 100%;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: -1px;
        z-index: 10;

        .header-text {
          font-size: 20px;
          font-weight: bold;
          color: #ffffff;
          background: linear-gradient(0deg, #ffffff 0%, #98deff 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .t-body {
        flex: 1;
        //border: 1px solid #2B7CB5;

        .tip-text {
          padding: 8px;
          font-size: 12px;
          color: #ffffff;
          line-height: 1.8;
        }
      }

      .t-row {
        display: flex;
        text-align: center;
        color: #ffffff;
        min-height: 32px;
        line-height: 32px;
        //border-bottom: 1px solid rgba(43, 124, 181, .5);

        &:nth-child(even) {
          background: rgba(12, 112, 189, 0.2);
        }
      }

      .t-column {
        color: white;
        flex: 1;
        padding: 0px 3px;
        border-right: 1px solid rgba(43, 124, 181, 0.4);

        &:nth-last-child(1) {
          border-right: none;
        }
      }
    }
  }
</style>
